<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,width=device-width,viewport-fit=cover">
    <title>经典小游戏开发</title>
    <script src="./asset/vue.global.js"></script>
    <script src="./asset/tailwindcss@3.4.16.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4CAF50',
                    },
                },
            },
        }
    </script>
</head>

<body class="min-h-screen bg-gradient-to-br from-[#1a1a1a] to-[#2d2d2d] text-white p-4 md:p-8 leading-relaxed">
    <div id="app" class="max-w-7xl mx-auto flex flex-col md:flex-row gap-5">
        <div class="bg-white/5 p-6 rounded-2xl">
            <div v-for="game in games" :key="game.id"
                class="mb-6 p-4 bg-white/[0.03] rounded-xl hover:bg-white/[0.05] transition-all cursor-pointer"
                @click="selectGame(game)">
                <div class="text-primary font-semibold block mb-2 hover:underline">{{ game.name }}</div>
                <div class="text-sm text-gray-400">版本数量（{{ game.versions.length }}）</div>
            </div>
        </div>
        <div class="flex-1">
            <section v-if="selectedGame"
                class="mb-12 bg-white/5 rounded-2xl p-8 shadow-lg hover:-translate-y-1 transition-transform duration-300">
                <header class="text-center mb-8">
                    <h1
                        class="text-4xl md:text-5xl mb-8 pb-2 relative inline-block after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-24 after:h-[3px] after:bg-gradient-to-r after:from-transparent after:via-primary after:to-transparent">
                        {{ selectedGame.name }}
                    </h1>
                    <p class="text-gray-200 text-lg max-w-3xl mx-auto leading-relaxed">
                        {{ selectedGame.description }}
                    </p>
                </header>
                <div
                    class="flex flex-col gap-8 py-4 overflow-x-auto scrollbar-thin scrollbar-thumb-primary/30 scrollbar-track-transparent">
                    <article v-for="version in selectedGame.versions" :key="version.id"
                        class="bg-white/[0.08] rounded-xl p-6 transition-all hover:bg-white/[0.12] hover:-translate-y-1 border border-primary/10">
                        <h2 class="text-xl text-primary font-semibold mb-4">
                            版本号：{{ version.name }}
                            <a :href="version.link"
                                class="inline-block bg-primary/20 text-white px-3 py-1 rounded-xl ml-3 text-base transition-all hover:bg-primary/30 hover:border-primary border border-primary/30"
                                target="_blank">点击演示</a>
                        </h2>
                        <div class="mt-4 pt-4 border-t border-white/10">
                            <h3 class="text-sm text-gray-400 mb-2">提示词</h3>
                            <p class="text-white">{{ version.description }}</p>
                        </div>
                    </article>
                </div>
            </section>
        </div>
    </div>
    <script>
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    selectedGame: null,
                    games: [
                        {
                            id: 1,
                            name: '俄罗斯方块',
                            description: '俄罗斯方块是一款经典的游戏，玩家需要控制方块在一个网格中移动，旋转和放置，以消除填满的行。游戏的目标是尽可能地填满网格，同时避免方块堆叠到顶部。',
                            versions: [
                                {
                                    id: 1,
                                    name: 'v1',
                                    link: './demo/tetris/v1.html',
                                    description: '使用canvas js 完成一个俄罗斯方块游戏，要求功能完整，显示分数，失败重开，方向键控制'
                                },
                                {
                                    id: 2,
                                    name: 'v2',
                                    link: './demo/tetris/v2.html',
                                    description: '失败alert改为自定义弹窗，有"重新开始"按钮，点击游戏重置'
                                },
                                {
                                    id: 3,
                                    name: 'v3',
                                    link: './demo/tetris/v3.html',
                                    description: '支持移动端，自适应屏幕，游戏画面下面有方向操作按钮'
                                },
                                {
                                    id: 4,
                                    name: 'v4',
                                    link: './demo/tetris/v4.html',
                                    description: '弹窗样式优化，文字不要换行。页面上面得分放到游戏画面左上角。游戏画面不要挡住按钮'
                                },
                                {
                                    id: 5,
                                    name: 'v5',
                                    link: './demo/tetris/v5.html',
                                    description: '按钮不灵敏，下落速度慢，在iPhone se 等小屏幕机型上，游戏画面压缩变形了'
                                }
                            ]
                        },
                        {
                            id: 2,
                            name: '超级马里奥',
                            description: '超级马里奥是一款经典的横版过关游戏，玩家需要控制马里奥进行跳跃、奔跑等动作，收集金币，躲避敌人，最终到达终点。',
                            versions: [
                                {
                                    id: 1,
                                    name: 'v1',
                                    link: './demo/SuperMario/v1.html',
                                    description: '使用 HTML5 Canvas、JavaScript 和 Matter.js 物理引擎实现的简化版超级马里奥游戏'
                                },
                                {
                                    id: 2,
                                    name: 'v2',
                                    link: './demo/SuperMario/v2.html',
                                    description: '修复主角无法跳跃的问题，并且添加适配移动端操作，按钮在屏幕下面，不要挡住游戏画面'
                                },
                                {
                                    id: 3,
                                    name: 'v3',
                                    link: './demo/SuperMario/v3.html',
                                    description: '按下左右方向键时，应该一直移动，释放才停止，不是按住不放只移动一下'
                                },
                                {
                                    id: 4,
                                    name: 'v4',
                                    link: './demo/SuperMario/v4.html',
                                    description: '添加主角跳跃踩死怪物功能'
                                },
                                {
                                    id: 5,
                                    name: 'v5',
                                    link: './demo/SuperMario/v5.html',
                                    description: '添加游戏设计'
                                },
                                {
                                    id: 6,
                                    name: 'v6',
                                    link: './demo/SuperMario/v6/index.html',
                                    description: '拆分组件, 优化代码结构, 改为es6模块化开发'
                                }
                            ]
                        }
                    ]
                }
            },
            mounted() {
                this.selectedGame = this.games[0];
            },
            methods: {
                selectGame(game) {
                    this.selectedGame = game;
                }
            }
        }).mount('#app')
    </script>
</body>

</html>